<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>首页</title>
    <!--semantic-ui-->
    <!-- <link href="https://cdn.bootcss.com/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet">-->
    <link th:href="@{/Semantic-UI-CSS-master/semantic.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/css/qinstyle.css}" rel="stylesheet">
    <script th:src="@{/js/jquery-3.4.1.min.js}" type="text/javascript" charset="utf-8"></script>
    <!--引入全局虚拟路径-->

</head>
<body style="">
<!--主容器-->
<div class="ui container">
    <div class="ui segment" id="index-header-nav" th:fragment="nav-menu"
         style="background-image:url('/images/test/loginName.png');background-repeat:no-repeat;background-size: 100% 100%;background-position: top center; ">
        <div class="ui secondary menu" style="margin-top: 15px">
            <!--<div class="ui inverted segment">-->
            <div class="center menu" style="margin-left: 20px" sec:authorize="isAuthenticated()">
                <img id="headImage" th:src="@{/images/momo/head01.jpg}" alt="头像" class="ui mini circular image">
            </div>
            <div class="left menu" style="margin-left: 20px">
                <button class="ui inverted yellow button" th:onclick="goToIndex()">
                    首&nbsp;&nbsp;&nbsp;&nbsp;页&nbsp;
                </button>
            </div>
            <!-- </div>-->
            <!--<a class="item"  th:href="@{/index}">首页</a>-->
            <!--登录注销-->
            <div class="right menu">
                <!--未登录则显示登录按钮-->
                <div sec:authorize="!isAuthenticated()">

                    <button class="ui inverted orange button" th:onclick="goToLogin()"><i
                            class="user secret icon"></i>登&nbsp;&nbsp;&nbsp;&nbsp;录&nbsp;
                    </button>
                    <button class="ui inverted purple button" th:onclick="goToAdminLogin()"><i
                            class="cogs icon"></i>管理员后台
                    </button>
                    <!--<a class="item" th:href="@{/toLogin}">
                          <i class="address card outline"></i> 登录
                      </a>-->
                </div>

                <!--登录成后显示用户名与角色信息-->
                <div sec:authorize="isAuthenticated()">
                    <button class="ui inverted pink button"> 用户名：<span id="LoginState" sec:authentication="name"></span>
                    </button>
                    <!--角色：<span sec:authentication="principal.getAuthorities()"></span>-->
                </div>
                <!--登录成后显示注销按钮-->
                <div sec:authorize="isAuthenticated()">
                    <button class="ui inverted green button" th:onclick="goToLogout()"><i
                            class="sign-out icon"></i>退 出
                    </button>
                    <!-- <a class="item" th:href="@{/logout}">
                         <i class="sign-out icon"></i> 退出
                     </a>-->
                </div>
                <!--已登录
                <a th:href="@{/usr/toUserCenter}">
                    <i class="address card icon"></i> admin
                </a>
                -->
            </div>

        </div>
        <h2 class="ui center aligned icon header"><i class="circular users icon"></i> 在线投票系统 </h2>
    </div>
    <div>
        <br>
        <div class="ui three column stackable grid">
            <!-- 根据用户角色动态显示菜单 -->
            <div class="column" sec:authorize="hasAuthority('ROLE_vip1')">
                <div class="ui raised segment inverted segment">
                    <div class="ui massive horizontal divided list">
                        <div class="item" id="fqtp" th:onclick="starT_A_Vote()">
                            <img class="ui avatar image" th:src="@{/images/index/mysql.jpg}">
                            <div class="content">
                                <div class="header">
                                    <div class="ui inverted segment">
                                        <button class="ui inverted teal basic button">发起投票</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <div class="ui raised segment">
                     <div class="ui">
                         <div class="content">
                             <h5 class="content">Level 1</h5>
                             <hr>
                             <div><a th:href="@{/level1/1}"><i class="bullhorn icon"></i> Level-1-1</a></div>
                             <div><a th:href="@{/level1/2}"><i class="bullhorn icon"></i> Level-1-2</a></div>
                             <div><a th:href="@{/level1/3}"><i class="bullhorn icon"></i> Level-1-3</a></div>
                         </div>
                     </div>
                 </div>-->
            </div>

            <div class="column" sec:authorize="hasAuthority('ROLE_vip1')">
                <div class="ui raised segment inverted segment">
                    <div class="ui massive horizontal divided list">
                        <div class="item">
                            <img class="ui avatar image" th:src="@{/images/index/mysql.jpg}">
                            <div class="content">
                                <div class="header">
                                    <div class="ui inverted segment">
                                        <button class="ui inverted teal basic button" th:onclick="takePartIn()">参与投票</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <div class="ui raised segment">
                     <div class="ui">
                         <div class="content">
                             <h5 class="content">Level 2</h5>
                             <hr>
                             <div><a th:href="@{/level2/1}"><i class="bullhorn icon"></i> Level-2-1</a></div>
                             <div><a th:href="@{/level2/2}"><i class="bullhorn icon"></i> Level-2-2</a></div>
                             <div><a th:href="@{/level2/3}"><i class="bullhorn icon"></i> Level-2-3</a></div>
                         </div>
                     </div>
                 </div>-->
            </div>
            <div class="column" sec:authorize="hasAuthority('ROLE_vip1')">
                <div class="ui raised segment inverted segment">
                    <div class="ui massive horizontal divided list">
                        <div class="item">
                            <img class="ui avatar image" th:src="@{/images/index/mysql.jpg}">
                            <div class="content">
                                <div class="header">
                                    <div class="ui inverted segment">
                                        <button class="ui inverted teal basic button">我的投票</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <div class="ui raised segment">
                     <div class="ui">
                         <div class="content">
                             <h5 class="content">Level 3</h5>
                             <hr>
                             <div><a th:href="@{/level3/1}"><i class="bullhorn icon"></i> Level-3-1</a></div>
                             <div><a th:href="@{/level3/2}"><i class="bullhorn icon"></i> Level-3-2</a></div>
                             <div><a th:href="@{/level3/3}"><i class="bullhorn icon"></i> Level-3-3</a></div>
                         </div>
                     </div>
                 </div>-->
            </div>

        </div>
    </div>
    <!--广告位-->
</div>
<div class="ui segment" style="position:fixed; bottom:40px;left: 200px;">
    <h3 style="text-align: center">特别感谢：一下开源技术框架排名不分先后</h3>
    <div class="ui ordered horizontal list">
        <div class="item">
            <img class="ui avatar image" th:src="@{images/index/mysql.jpg}">
            <div class="content">
                <div class="header">MySQL</div>
                5.7
            </div>
        </div>
        <div class="item">
            <img class="ui avatar image" th:src="@{images/index/springboot.jpg}">
            <div class="content">
                <div class="header">SpringBoot</div>
                2.0.7
            </div>
        </div>
        <div class="item">
            <img class="ui avatar image" th:src="@{images/index/mybatisplus.jpg}">
            <div class="content">
                <div class="header">Mybatis-plus</div>
                3.4.0
            </div>
        </div>

    </div>
    <div class="ui ordered horizontal list">
        <div class="item">
            <img class="ui avatar image" th:src="@{/images/index/springsecurity.jpg}">
            <div class="content">
                <div class="header">SpringSecurity</div>
                5.0.10.RELEASE
            </div>
        </div>
        <div class="item">
            <img class="ui avatar image" th:src="@{/images/index/lombok.jpg}">
            <div class="content">
                <div class="header">Lombok</div>
                1.16.22
            </div>
        </div>
        <div class="item">
            <img class="ui avatar image" th:src="@{/images/index/swagger2.jpg}">
            <div class="content">
                <div class="header">Springfox-Swagger2</div>
                2.9.2
            </div>
        </div>
    </div>
</div>
<footer style="position:fixed;bottom:0;left:30%;right:0;margin-left:auto;margin-right:auto">
    <div class="ui animated fade button" tabindex="0" style="width:500px;height: 50px ">
        <div class="visible content">Property in Copyright</div>
        <div class="hidden content">版权所有<span style="font-family:arial;">Copyright &copy;2020 郭童<br>（<a
                th:src="@{https://www.cnblogs.com/gtnotgod/articles/14123913.html}">https://www.cnblogs.com/gtnotgod/articles/14123913.html</a>）</span>
        </div>
    </div>
</footer>
<script th:src="@{/js/semantic.min.js}"></script>
<script type="text/javascript" th:inline="javascript">
    //虚拟路径
    var contentPath = [[${#httpServletRequest.getScheme() + '://' + #httpServletRequest.getServerName() + ':' + #request.getServerPort()  + #request.getContextPath() + '/'}]];

    //项目加载完毕
    $(function () {
        //手抓形象
        $('#headImage').hover(function () {
            $(this).css("cursor", "pointer");
        });
        $('#fqtp').hover(function () {
            $(this).css("cursor", "pointer");
        });

        $('#headImage').click(function () {
            //替换图片，自己的头像
            $.ajax({
                //请求方式
                type: "GET",
                //请求的媒体类型
                contentType: "application/json;charset=UTF-8",
                //请求地址
                url: contentPath + "student-user-info/login/user",
                //请求成功
                success: function (result) {
                    console.log(result);
                    let prefixUrl = "https://edu-gt.oss-cn-beijing.aliyuncs.com/";
                    $('#headImage').attr("src", prefixUrl + result.data);
                },
                //请求失败，包含具体的错误信息
                error: function (e) {
                    console.log(e.status);
                    console.log(e.responseText);
                }
            });
        });
    });

    //首页链接
    function goToIndex() {
        // window.location.href ="https://www.baidu.com";  //contentPath  +  路径（不加斜线）
        window.location.href = contentPath + "index";
    }

    //登录链接页面跳转：
    function goToLogin() {
        window.location.href = contentPath + "toLogin";
    }
    //参与投票
    function takePartIn() {
        window.location.href = contentPath + "level1/gotoActivityHall";
    }

    //管理员登录页面跳转
    function goToAdminLogin() {
        window.location.href = contentPath + "toLogin";
    }

    //退出
    function goToLogout() {
        window.location.href = contentPath + "logout";
    }

    function TEST01() {

    }
    function starT_A_Vote() {
        window.location.href=contentPath+"level1/goToVote";
    }

</script>
<script th:inline="javascript" sec:authorize="isAuthenticated()">
    //虚拟路径
    var contentPath = [[${#httpServletRequest.getScheme() + '://' + #httpServletRequest.getServerName() + ':' + #request.getServerPort()  + #request.getContextPath() + '/'}]];

    //项目加载完毕
    $(function () {
        //给眼睛添加聚焦手抓形象
        $('#headImage').hover(function () {
            $(this).css("cursor", "pointer");
        });
        $.ajax({
            //请求方式
            type: "GET",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url: contentPath + "student-user-info/login/user",
            //请求成功
            success: function (result) {
                console.log(result);
                let prefixUrl = "https://edu-gt.oss-cn-beijing.aliyuncs.com/";
                $('#headImage').attr("src", prefixUrl + result.data);
            },
            //请求失败，包含具体的错误信息
            error: function (e) {
                console.log(e.status);
                console.log(e.responseText);
            }
        });
    });
</script>
</body>
</html>